<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小组作品投票系统 - 学生投票</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            padding: 30px 20px;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        header h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
        }
        
        header p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto;
            opacity: 0.9;
            line-height: 1.6;
        }
        
        .card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            padding: 30px;
            margin: 25px 0;
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .step {
            display: none;
        }
        
        .step.active {
            display: block;
        }
        
        .step-title {
            text-align: center;
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
        }
        
        .step-subtitle {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 30px;
            font-size: 1.1rem;
        }
        
        .groups-container, .works-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .group-item, .work-item {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid #e9ecef;
            position: relative;
            overflow: hidden;
        }
        
        .group-item:hover, .work-item:hover {
            transform: scale(1.03);
            border-color: #3498db;
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }
        
        .group-item.selected, .work-item.selected {
            border-color: #2ecc71;
            background: rgba(46, 204, 113, 0.1);
            transform: scale(1.05);
        }
        
        .group-item i, .work-item i {
            font-size: 2.5rem;
            color: #3498db;
            margin-bottom: 15px;
            display: block;
        }
        
        .group-item.selected i, .work-item.selected i {
            color: #2ecc71;
        }
        
        .group-item h3, .work-item h3 {
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .group-item p, .work-item p {
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .btn {
            display: inline-block;
            background: #3498db;
            color: white;
            padding: 14px 30px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 25px;
            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
        }
        
        .btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .btn-block {
            display: block;
            width: 100%;
            text-align: center;
        }
        
        .btn-success {
            background: #2ecc71;
        }
        
        .btn-success:hover {
            background: #27ae60;
        }
        
        .disabled {
            background: #95a5a6;
            cursor: not-allowed;
        }
        
        .disabled:hover {
            background: #95a5a6;
            transform: none;
        }
        
        .btn-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #2ecc71;
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transform: translateX(200%);
            transition: transform 0.4s ease;
            z-index: 1000;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .admin-link {
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            background: rgba(0,0,0,0.1);
            border-radius: 10px;
        }
        
        .admin-link a {
            color: #3498db;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1rem;
            display: inline-block;
            padding: 10px 20px;
            transition: all 0.3s ease;
        }
        
        .admin-link a:hover {
            text-decoration: underline;
        }
        
        footer {
            text-align: center;
            color: rgba(255,255,255,0.7);
            padding: 30px 0;
            font-size: 0.9rem;
        }
        
        .rules {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            border-left: 4px solid #3498db;
        }
        
        .rules h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .rules ul {
            padding-left: 20px;
        }
        
        .rules li {
            margin-bottom: 8px;
            color: #555;
        }
        
        @media (max-width: 768px) {
            .groups-container, .works-container {
                grid-template-columns: repeat(2, 1fr);
            }
            
            header h1 {
                font-size: 2.2rem;
            }
            
            .btn-container {
                flex-direction: column;
            }
        }
        
        @media (max-width: 480px) {
            .groups-container, .works-container {
                grid-template-columns: 1fr;
            }
            
            .card {
                padding: 20px 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-vote-yea"></i> 小组作品投票系统</h1>
            <p>请选择您所在的小组，然后为您最喜欢的作品投票（不能投本组作品）</p>
        </header>
        
        <div class="rules">
            <h3><i class="fas fa-info-circle"></i> 投票规则</h3>
            <ul>
                <li>每个用户只能投一次票</li>
                <li>不能为自己小组的作品投票</li>
                <li>投票后无法查看实时票数</li>
                <li>投票完成后无法更改</li>
                <li>最终结果由管理员公布</li>
            </ul>
        </div>
        
        <div class="card">
            <div id="step1" class="step active">
                <h2 class="step-title">第一步：选择您的小组</h2>
                <p class="step-subtitle">请从下面选择您所在的小组（1-12组）</p>
                <div class="groups-container" id="groups">
                    <!-- 小组将通过JS生成 -->
                </div>
                <div class="btn-container">
                    <button id="nextToStep2" class="btn disabled" disabled>
                        下一步 <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>
            
            <div id="step2" class="step">
                <h2 class="step-title">第二步：选择您要投票的作品</h2>
                <p class="step-subtitle">请为除您小组外的作品投票</p>
                <div class="works-container" id="works">
                    <!-- 作品将通过JS生成 -->
                </div>
                <div class="btn-container">
                    <button id="backToStep1" class="btn">
                        <i class="fas fa-arrow-left"></i> 返回
                    </button>
                    <button id="submitVote" class="btn btn-success disabled" disabled>
                        提交投票 <i class="fas fa-check"></i>
                    </button>
                </div>
            </div>
            
            <div id="step3" class="step">
                <div style="text-align: center; padding: 40px 20px;">
                    <i class="fas fa-check-circle" style="font-size: 5rem; color: #2ecc71; margin-bottom: 25px;"></i>
                    <h2 class="step-title">投票成功！</h2>
                    <p style="font-size: 1.2rem; margin-bottom: 30px; color: #555;">
                        感谢您的参与，您的投票已成功提交。<br>
                        投票结果将在活动结束后由管理员公布。
                    </p>
                </div>
            </div>
        </div>
        
        <div class="admin-link">
            <p>管理员请访问: <a href="admin.html">投票数据查看页面</a></p>
        </div>
        
        <div id="notification" class="notification">
            投票成功！感谢您的参与
        </div>
        
        <footer>
            <p>© 2023 小组作品投票系统 | 设计：教学管理系统 | 注意：每个用户只能投一次票</p>
        </footer>
    </div>

    <script>
        // 模拟数据
        const groups = Array.from({length: 12}, (_, i) => ({
            id: i + 1,
            name: `第${i + 1}小组`,
            work: `作品 #${i + 1}`
        }));
        
        // 初始化投票数据
        let votes = JSON.parse(localStorage.getItem('votes')) || {};
        let currentGroup = null;
        let selectedWork = null;
        let voted = localStorage.getItem('voted') === 'true';
        
        // 初始化DOM元素
        const groupsContainer = document.getElementById('groups');
        const worksContainer = document.getElementById('works');
        const step1 = document.getElementById('step1');
        const step2 = document.getElementById('step2');
        const step3 = document.getElementById('step3');
        const nextBtn = document.getElementById('nextToStep2');
        const backBtn = document.getElementById('backToStep1');
        const submitBtn = document.getElementById('submitVote');
        const notification = document.getElementById('notification');
        
        // 初始化小组选择
        function initGroups() {
            groupsContainer.innerHTML = '';
            groups.forEach(group => {
                const groupEl = document.createElement('div');
                groupEl.className = 'group-item';
                groupEl.dataset.groupId = group.id;
                groupEl.innerHTML = `
                    <i class="fas fa-users"></i>
                    <h3>${group.name}</h3>
                    <p>小组 ${group.id}</p>
                `;
                groupEl.addEventListener('click', () => selectGroup(group.id));
                groupsContainer.appendChild(groupEl);
            });
        }
        
        // 选择小组
        function selectGroup(groupId) {
            // 移除之前的选择
            document.querySelectorAll('.group-item').forEach(item => {
                item.classList.remove('selected');
            });
            
            // 设置当前选择
            const selectedGroup = document.querySelector(`.group-item[data-group-id="${groupId}"]`);
            selectedGroup.classList.add('selected');
            
            currentGroup = groupId;
            nextBtn.disabled = false;
            nextBtn.classList.remove('disabled');
        }
        
        // 下一步
        nextBtn.addEventListener('click', () => {
            if (currentGroup) {
                step1.classList.remove('active');
                step2.classList.add('active');
                initWorks();
            }
        });
        
        // 初始化作品列表
        function initWorks() {
            worksContainer.innerHTML = '';
            groups.forEach(group => {
                // 不能投本组作品
                if (group.id === currentGroup) return;
                
                const workEl = document.createElement('div');
                workEl.className = 'work-item';
                workEl.dataset.workId = group.id;
                workEl.innerHTML = `
                    <i class="fas fa-paint-brush"></i>
                    <h3>${group.work}</h3>
                    <p>${group.name}</p>
                `;
                workEl.addEventListener('click', () => selectWork(group.id));
                worksContainer.appendChild(workEl);
            });
        }
        
        // 选择作品
        function selectWork(workId) {
            // 移除之前的选择
            document.querySelectorAll('.work-item').forEach(item => {
                item.classList.remove('selected');
            });
            
            // 设置当前选择
            const selected = document.querySelector(`.work-item[data-work-id="${workId}"]`);
            selected.classList.add('selected');
            
            selectedWork = workId;
            submitBtn.disabled = false;
            submitBtn.classList.remove('disabled');
        }
        
        // 返回第一步
        backBtn.addEventListener('click', () => {
            step2.classList.remove('active');
            step1.classList.add('active');
            selectedWork = null;
        });
        
        // 提交投票
        submitBtn.addEventListener('click', () => {
            if (voted) {
                showNotification("您已经投过票了，不能再次投票");
                return;
            }
            
            if (!currentGroup || !selectedWork) {
                showNotification("请选择小组和作品");
                return;
            }
            
            // 更新投票数据
            votes[selectedWork] = (votes[selectedWork] || 0) + 1;
            localStorage.setItem('votes', JSON.stringify(votes));
            
            // 标记用户已投票
            voted = true;
            localStorage.setItem('voted', 'true');
            
            // 显示成功消息
            showNotification("投票成功！感谢您的参与");
            
            // 转到完成页面
            step2.classList.remove('active');
            step3.classList.add('active');
        });
        
        // 显示通知
        function showNotification(message) {
            notification.textContent = message;
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
        
        // 初始化页面
        initGroups();
        
        // 如果用户已经投票，直接显示完成页面
        if (voted) {
            step1.classList.remove('active');
            step3.classList.add('active');
        }
    </script>
</body>
</html>